﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="title" content="Bootstrap可视化布局系统">
    <meta name="description" content="Bootstrap可视化布局系统是一款可在线拖放排序、在线编辑的Bootstrap可视化编辑器，通过该工具你可以通过拖放的形式的实现在线编辑基于bootstrap的html模板，并可直接生成模板，生成的模板可以直接下载。">
    <meta name="keywords" content="bootstrap在线编辑器,bootstrap在线设计,bootstrap可视化工具">
    <title>Bootstrap在线布局</title>
    <link rel="stylesheet" href="./css/bootstrap-combined.min.css">
    <link rel="stylesheet" href="./css/layoutit.css">
    <link rel="stylesheet" href="./css/docs.min.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <!--[if lt IE 9]>
		<script src="./js/html5shiv.js"></script>
	<![endif]-->
    <link rel="shortcut icon" href="img/favicon.png">
    <script type="text/javascript" src="./js/jquery-2.0.0.min.js"></script>
    <!--[if lt IE 9]>
	<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
	<![endif]-->
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.js"></script>
    <script type="text/javascript" src="./js/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="./js/jquery.htmlClean.js"></script>
    <script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="./ckeditor/config.js"></script>
    <script type="text/javascript" src="./js/scripts.js"></script>
    <script type="text/javascript" src="./js/FileSaver.js"></script>
    <script type="text/javascript" src="./js/blob.js"></script>
    <script type="text/javascript" src="./js/docs.min.js"></script>
    <style>
</style>
</head>
<body style="min-height: 660px; cursor: auto;" class="edit">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <div class="nav-collapse collapse">
                    <ul class="nav" id="menu-layoutit">
                        <li class="divider-vertical"></li>
                        <li>
                            <div class="btn-group">
                                <button onclick="resizeCanvas('lg')" class="btn btn-primary" title="自适应大小"><i class="fa fa-desktop"></i></button>
                                <button onclick="resizeCanvas('md')" class="btn btn-primary" title="固定宽度"><i class="fa fa-laptop"></i></button>
                                <button onclick="resizeCanvas('sm')" class="btn btn-primary" title="平板电脑"><i class="fa fa-tablet"></i></button>
                                <button onclick="resizeCanvas('xs')" class="btn btn-primary" title="手机"><i class="fa fa-mobile-phone"></i></button>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-primary" href="javascript:void(0);"><i class="icon-home icon-white"></i>首页</a>
                            </div>
                            <div class="btn-group" data-toggle="buttons-radio">
                                <button type="button" id="edit" class="btn btn-primary active"><i class="icon-edit icon-white"></i>编辑</button>
                                <button type="button" class="btn btn-primary" id="devpreview"><i class="icon-eye-close icon-white"></i>布局编辑</button>
                                <button type="button" class="btn btn-primary" id="sourcepreview"><i class="icon-eye-open icon-white"></i>预览</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-target="#downloadModal" rel="/build/downloadModal" role="button" data-toggle="modal"><i class="icon-chevron-down icon-white"></i>下载</button>
                                <button class="btn btn-primary" href="#clear" id="clear"><i class="icon-trash icon-white"></i>清空</button>
                            </div>
                        </li>
                    </ul>
                    <ul class="nav pull-right">
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-xs btn-info" href="http://www.sitemate.net/" target="_blank">SiteMate CMS</a>
                                <a class="btn btn-xs btn-info" href="http://demo.sitemate.net/demo/" target="_blank">教程</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="changeDimension">
            <div class="row-fluid">
                <div class="">
                    <div class="sidebar-nav">
                        <ul class="nav nav-list accordion-group">
                            <li class="nav-header">
                                <div class="pull-right popover-info">
                                    <i class="icon-question-sign "></i>
                                    <div class="popover fade right">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title">帮助</h3>
                                        <div class="popover-content">在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值, 如果您需要了解更多信息，请访问<a target="_blank" href="#bootstrap/bootstrap-grid-system.html">Bootstrap网格系统。</a></div>
                                    </div>
                                </div>
                                <i class="icon-plus icon-white"></i>布局系统 </li>
                            <li style="display: list-item;" class="rows" id="estRows">
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="12" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="span12 column"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="6 6" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="span6 column"></div>
                                            <div class="span6 column"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="8 4" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="span8 column"></div>
                                            <div class="span4 column"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="4 4 4" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="span4 column"></div>
                                            <div class="span4 column"></div>
                                            <div class="span4 column"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="2 6 4" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="span2 column"></div>
                                            <div class="span6 column"></div>
                                            <div class="span4 column"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="6 4 4" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="col-xs-6 span4 column"></div>
                                            <div class="col-xs-6 span4 column"></div>
                                            <div class="col-xs-6 span4 column"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="9 3" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="col-xs-6 span9 column"></div>
                                            <div class="col-xs-6 span3 column "></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="3 3 3 3" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="col-xs-3 span3 column"></div>
                                            <div class="col-xs-3 span3 column "></div>
                                            <div class="col-xs-3 span3 column"></div>
                                            <div class="col-xs-3 span3 column"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="lyrow ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">
                                        <input value="嵌套列" type="text">
                                    </div>
                                    <div class="view">
                                        <div class="row-fluid clearfix">
                                            <div class="span12 column">
                                                <div class="row-fluid clearfix">
                                                    <div class="span6 column">
                                                    </div>
                                                    <div class="span6 column">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="nav nav-list accordion-group">
                            <li class="nav-header"><i class="icon-plus icon-white"></i>基本 CSS
                                <div class="pull-right popover-info">
                                    <i class="icon-question-sign "></i>
                                    <div class="popover fade right">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title">帮助</h3>
                                        <div class="popover-content">这里提供了一系列基本元素样式，你可以通过区块右上角的编辑按钮修改样式设置。如需了解更多信息，请访问<a target="_blank" href="#bootstrap/bootstrap-css-overview.html">基本CSS。</a></div>
                                    </div>
                                </div>
                            </li>
                            <li style="display: none;" class="boxes" id="elmBase">
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">对齐 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">默认</a></li>
                                                <li class=""><a href="#" rel="text-left">靠左</a></li>
                                                <li class=""><a href="#" rel="text-center">居中</a></li>
                                                <li class=""><a href="#" rel="text-right">靠右</a></li>
                                            </ul>
                                        </span><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">标记 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">默认</a></li>
                                                <li class=""><a href="#" rel="muted">禁用</a></li>
                                                <li class=""><a href="#" rel="text-warning">警告</a></li>
                                                <li class=""><a href="#" rel="text-error">错误</a></li>
                                                <li class=""><a href="#" rel="text-info">提示</a></li>
                                                <li class=""><a href="#" rel="text-success">成功</a></li>
                                            </ul>
                                        </span></span>
                                    <div class="preview">标题栏</div>
                                    <div class="view">
                                        <h3 contenteditable="true">h3. 这是一套可视化布局系统.</h3>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">对齐 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">默认</a></li>
                                                <li class=""><a href="#" rel="text-left">靠左</a></li>
                                                <li class=""><a href="#" rel="text-center">居中</a></li>
                                                <li class=""><a href="#" rel="text-right">靠右</a></li>
                                            </ul>
                                        </span><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">标记 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">默认</a></li>
                                                <li class=""><a href="#" rel="muted">禁用</a></li>
                                                <li class=""><a href="#" rel="text-warning">警告</a></li>
                                                <li class=""><a href="#" rel="text-error">错误</a></li>
                                                <li class=""><a href="#" rel="text-info">提示</a></li>
                                                <li class=""><a href="#" rel="text-success">成功</a></li>
                                            </ul>
                                        </span><a class="btn btn-mini" href="#" rel="lead">Lead</a> </span>
                                    <div class="preview">段落</div>
                                    <div class="view" contenteditable="true">
                                        <p><em>Git</em>是一个分布式的版本控制系统，最初由<b>Linus Torvalds</b>编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在Ruby社区中。 </p>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">地址</div>
                                    <div class="view">
                                        <address contenteditable="true">
                                            <strong>Twitter, Inc.</strong><br>
                                            795 Folsom Ave, Suite 600<br>
                                            San Francisco, CA 94107<br>
                                            <abbr title="Phone">P:</abbr>
                                            (123) 456-7890
                                        </address>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><a class="btn btn-mini" href="#" rel="pull-right">Pull Right</a> </span>
                                    <div class="preview">引用块</div>
                                    <div class="view clearfix">
                                        <blockquote contenteditable="true">
                                            <p>github是一个全球化的开源社区.</p>
                                            <small>关键词 <cite title="Source Title">开源</cite></small>
                                        </blockquote>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="unstyled">Unstyled</a> <a class="btn btn-mini" href="#" rel="inline">Inline</a> </span>
                                    <div class="preview">无序列表</div>
                                    <div class="view">
                                        <ul contenteditable="true">
                                            <li>新闻资讯</li>
                                            <li>体育竞技</li>
                                            <li>娱乐八卦</li>
                                            <li>前沿科技</li>
                                            <li>环球财经</li>
                                            <li>天气预报</li>
                                            <li>房产家居</li>
                                            <li>网络游戏</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="unstyled">Unstyled</a> <a class="btn btn-mini" href="#" rel="inline">Inline</a> </span>
                                    <div class="preview">有序列表</div>
                                    <div class="view">
                                        <ol contenteditable="true">
                                            <li>新闻资讯</li>
                                            <li>体育竞技</li>
                                            <li>娱乐八卦</li>
                                            <li>前沿科技</li>
                                            <li>环球财经</li>
                                            <li>天气预报</li>
                                            <li>房产家居</li>
                                            <li>网络游戏</li>
                                        </ol>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="dl-horizontal">竖向对齐</a> </span>
                                    <div class="preview">详细描述</div>
                                    <div class="view">
                                        <dl contenteditable="true">
                                            <dt>Rolex</dt>
                                            <dd>劳力士创始人为汉斯.威尔斯多夫，1908年他在瑞士将劳力士注册为商标。</dd>
                                            <dt>Vacheron Constantin</dt>
                                            <dd>始创于1775年的江诗丹顿已有250年历史，</dd>
                                            <dd>是世界上历史最悠久、延续时间最长的名表之一。</dd>
                                            <dt>IWC</dt>
                                            <dd>创立于1868年的万国表有“机械表专家”之称。</dd>
                                            <dt>Cartier</dt>
                                            <dd>卡地亚拥有150多年历史，是法国珠宝金银首饰的制造名家。</dd>
                                        </dl>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">默认</a></li>
                                                <li class=""><a href="#" rel="table-striped">条纹</a></li>
                                                <li class=""><a href="#" rel="table-bordered">边框</a></li>
                                            </ul>
                                        </span><a class="btn btn-mini" href="#" rel="table-hover">鼠标指示</a> <a class="btn btn-mini" href="#" rel="table-condensed">紧凑</a> </span>
                                    <div class="preview">表格</div>
                                    <div class="view">
                                        <table class="table" contenteditable="true">
                                            <thead>
                                                <tr>
                                                    <th>编号</th>
                                                    <th>产品</th>
                                                    <th>交付时间</th>
                                                    <th>状态</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>TB - Monthly</td>
                                                    <td>01/04/2012</td>
                                                    <td>Default</td>
                                                </tr>
                                                <tr class="success">
                                                    <td>1</td>
                                                    <td>TB - Monthly</td>
                                                    <td>01/04/2012</td>
                                                    <td>Approved</td>
                                                </tr>
                                                <tr class="error">
                                                    <td>2</td>
                                                    <td>TB - Monthly</td>
                                                    <td>02/04/2012</td>
                                                    <td>Declined</td>
                                                </tr>
                                                <tr class="warning">
                                                    <td>3</td>
                                                    <td>TB - Monthly</td>
                                                    <td>03/04/2012</td>
                                                    <td>Pending</td>
                                                </tr>
                                                <tr class="info">
                                                    <td>4</td>
                                                    <td>TB - Monthly</td>
                                                    <td>04/04/2012</td>
                                                    <td>Call in to confirm</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="form-inline">嵌入</a> </span>
                                    <div class="preview">提交表单</div>
                                    <div class="view">
                                        <form>
                                            <fieldset>
                                                <legend contenteditable="true">表单项</legend>
                                                <label contenteditable="true">表签名</label>
                                                <input type="text" placeholder="Type something…">
                                                <span class="help-block" contenteditable="true">这里填写帮助信息.</span>
                                                <label class="checkbox" contenteditable="true">
                                                    <input type="checkbox">
                                                    勾选同意
                                                </label>
                                                <button type="submit" class="btn" contenteditable="true">提交</button>
                                            </fieldset>
                                        </form>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="form-inline">嵌入</a> </span>
                                    <div class="preview">搜索框</div>
                                    <div class="view">
                                        <form class="form-search">
                                            <input class="input-medium search-query" type="text">
                                            <button type="submit" class="btn" contenteditable="true">查找</button>
                                        </form>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"></span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">纵向表单</div>
                                    <div class="view">
                                        <form class="form-horizontal">
                                            <div class="control-group">
                                                <label class="control-label" for="inputEmail" contenteditable="true">Email</label>
                                                <div class="controls">
                                                    <input id="inputEmail" placeholder="Email" type="text">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label" for="inputPassword" contenteditable="true">密码</label>
                                                <div class="controls">
                                                    <input id="inputPassword" placeholder="Password" type="password">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <div class="controls">
                                                    <label class="checkbox" contenteditable="true">
                                                        <input type="checkbox">
                                                        记住我
                                                    </label>
                                                    <button type="submit" class="btn" contenteditable="true">登陆</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li class="active"><a href="#" rel="">默认</a></li>
                                            <li class=""><a href="#" rel="btn-primary">重点</a></li>
                                            <li class=""><a href="#" rel="btn-info">信息</a></li>
                                            <li class=""><a href="#" rel="btn-success">成功</a></li>
                                            <li class=""><a href="#" rel="btn-warning">提醒</a></li>
                                            <li class=""><a href="#" rel="btn-danger">危险</a></li>
                                            <li class=""><a href="#" rel="btn-inverse">反转</a></li>
                                            <li class=""><a href="#" rel="btn-link">链接</a></li>
                                        </ul>
                                    </span><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Size <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li class=""><a href="#" rel="btn-large">大</a></li>
                                            <li class="active"><a href="#" rel="">中</a></li>
                                            <li class=""><a href="#" rel="btn-small">小</a></li>
                                            <li class=""><a href="#" rel="btn-mini">微型</a></li>
                                        </ul>
                                    </span><a class="btn btn-mini" href="#" rel="btn-block">通栏</a> <a class="btn btn-mini" href="#" rel="disabled">禁用</a> </span>
                                    <div class="preview">按钮</div>
                                    <div class="view">
                                        <button class="btn" type="button" contenteditable="true">按钮</button>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li class="active"><a href="#" rel="">默认</a></li>
                                            <li class=""><a href="#" rel="img-rounded">圆角</a></li>
                                            <li class=""><a href="#" rel="img-circle">圆圈</a></li>
                                            <li class=""><a href="#" rel="img-polaroid">相框</a></li>
                                        </ul>
                                    </span></span>
                                    <div class="preview">图片</div>
                                    <div class="view">
                                        <img alt="140x140" src="img/a.jpg">
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                    </span>
                                    <div class="preview">仪表盘 <span class="label label-important">NEW!</span></div>
                                    <div class="view">
                                        <div class="container-fluid">
                                            <div class="row">
                                                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                                                    <h1 class="page-header">仪表盘</h1>
                                                    <div class="row placeholders">
                                                        <div class="col-xs-6 col-sm-3 placeholder">
                                                            <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
                                                            <h4>标题</h4>
                                                            <span class="text-muted">简短描述</span>
                                                        </div>
                                                        <div class="col-xs-6 col-sm-3 placeholder">
                                                            <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
                                                            <h4>标题</h4>
                                                            <span class="text-muted">简短描述</span>
                                                        </div>
                                                        <div class="col-xs-6 col-sm-3 placeholder">
                                                            <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
                                                            <h4>标题</h4>
                                                            <span class="text-muted">简短描述</span>
                                                        </div>
                                                        <div class="col-xs-6 col-sm-3 placeholder">
                                                            <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
                                                            <h4>标题</h4>
                                                            <span class="text-muted">简短描述</span>
                                                        </div>
                                                    </div>
                                                    <h2 class="sub-header">标题部分</h2>
                                                    <div class="table-responsive">
                                                        <table class="table table-striped">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>标题</th>
                                                                    <th>标题</th>
                                                                    <th>标题</th>
                                                                    <th>标题</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>1,001</td>
                                                                    <td>Lorem</td>
                                                                    <td>ipsum</td>
                                                                    <td>dolor</td>
                                                                    <td>sit</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,002</td>
                                                                    <td>amet</td>
                                                                    <td>consectetur</td>
                                                                    <td>adipiscing</td>
                                                                    <td>elit</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,003</td>
                                                                    <td>Integer</td>
                                                                    <td>nec</td>
                                                                    <td>odio</td>
                                                                    <td>Praesent</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,003</td>
                                                                    <td>libero</td>
                                                                    <td>Sed</td>
                                                                    <td>cursus</td>
                                                                    <td>ante</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,004</td>
                                                                    <td>dapibus</td>
                                                                    <td>diam</td>
                                                                    <td>Sed</td>
                                                                    <td>nisi</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,005</td>
                                                                    <td>Nulla</td>
                                                                    <td>quis</td>
                                                                    <td>sem</td>
                                                                    <td>at</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,006</td>
                                                                    <td>nibh</td>
                                                                    <td>elementum</td>
                                                                    <td>imperdiet</td>
                                                                    <td>Duis</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,007</td>
                                                                    <td>sagittis</td>
                                                                    <td>ipsum</td>
                                                                    <td>Praesent</td>
                                                                    <td>mauris</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,008</td>
                                                                    <td>Fusce</td>
                                                                    <td>nec</td>
                                                                    <td>tellus</td>
                                                                    <td>sed</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,009</td>
                                                                    <td>augue</td>
                                                                    <td>semper</td>
                                                                    <td>porta</td>
                                                                    <td>Mauris</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,010</td>
                                                                    <td>massa</td>
                                                                    <td>Vestibulum</td>
                                                                    <td>lacinia</td>
                                                                    <td>arcu</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,011</td>
                                                                    <td>eget</td>
                                                                    <td>nulla</td>
                                                                    <td>Class</td>
                                                                    <td>aptent</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,012</td>
                                                                    <td>taciti</td>
                                                                    <td>sociosqu</td>
                                                                    <td>ad</td>
                                                                    <td>litora</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,013</td>
                                                                    <td>torquent</td>
                                                                    <td>per</td>
                                                                    <td>conubia</td>
                                                                    <td>nostra</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,014</td>
                                                                    <td>per</td>
                                                                    <td>inceptos</td>
                                                                    <td>himenaeos</td>
                                                                    <td>Curabitur</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>1,015</td>
                                                                    <td>sodales</td>
                                                                    <td>ligula</td>
                                                                    <td>in</td>
                                                                    <td>libero</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span><span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                    </span>
                                    <div class="preview">颜色 <span class="label label-important">NEW!</span></div>
                                    <div class="view">
                                        <style>
                                            .color-swatches .brand-primary { background-color: #428BCA; }
                                            .color-swatches .brand-success { background-color: #5CB85C; }
                                            .color-swatches .brand-info { background-color: #5BC0DE; }
                                            .color-swatches .brand-warning { background-color: #F0AD4E; }
                                            .color-swatches .brand-danger { background-color: #D9534F; }
                                            .color-swatches .gray-darker { background-color: #222222; }
                                            .color-swatches .gray-dark { background-color: #333333; }
                                            .color-swatches .gray { background-color: #555555; }
                                            .color-swatches .gray-light { background-color: #999999; }
                                            .color-swatches .gray-lighter { background-color: #EEEEEE; }
                                        </style>
                                        <div class="bs-example">
                                            <div class="color-swatches">
                                                <div class="color-swatch brand-primary"></div>
                                                <div class="color-swatch brand-success"></div>
                                                <div class="color-swatch brand-info"></div>
                                                <div class="color-swatch brand-warning"></div>
                                                <div class="color-swatch brand-danger"></div>
                                            </div>
                                            <br />
                                            <div class="color-swatches">
                                                <div class="color-swatch gray-darker"></div>
                                                <div class="color-swatch gray-dark"></div>
                                                <div class="color-swatch gray"></div>
                                                <div class="color-swatch gray-light"></div>
                                                <div class="color-swatch gray-lighter"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="nav nav-list accordion-group">
                            <li class="nav-header"><i class="icon-plus icon-white"></i>组件
                                <div class="pull-right popover-info">
                                    <i class="icon-question-sign "></i>
                                    <div class="popover fade right">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title">帮助</h3>
                                        <div class="popover-content">拖放组件到布局框内. 拖入后你可以设置组件样式. 查看这里获取更多帮助 <a target="_blank" href="#bootstrap/bootstrap-glyphicons.html">组件。</a></div>
                                    </div>
                                </div>
                            </li>
                            <li style="display: none;" class="boxes" id="elmComponents">
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">方向<span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li class="active"><a href="#" rel="">横向</a></li>
                                            <li class=""><a href="#" rel="btn-group-vertical">竖向</a></li>
                                        </ul>
                                    </span></span>
                                    <div class="preview">按钮组</div>
                                    <div class="view">
                                        <div class="btn-group">
                                            <button class="btn" type="button"><i class="icon-align-left"></i></button>
                                            <button class="btn" type="button"><i class="icon-align-center"></i></button>
                                            <button class="btn" type="button"><i class="icon-align-right"></i></button>
                                            <button class="btn" type="button"><i class="icon-align-justify"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="dropup">上拉</a> </span>
                                    <div class="preview">下拉菜单</div>
                                    <div class="view">
                                        <div class="btn-group">
                                            <button class="btn" contenteditable="true">Action</button>
                                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                                            <ul class="dropdown-menu" contenteditable="true">
                                                <li><a href="#">操作</a></li>
                                                <li><a href="#">设置栏目</a></li>
                                                <li><a href="#">更多设置</a></li>
                                                <li class="divider"></li>
                                                <li class="dropdown-submenu"><a tabindex="-1" href="#">更多选项</a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="#">操作</a></li>
                                                        <li><a href="#">设置栏目</a></li>
                                                        <li><a href="#">更多设置</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class=""><a href="#" rel="nav-tabs">线框</a></li>
                                                <li class=""><a href="#" rel="nav-pills">图钉</a></li>
                                            </ul>
                                        </span><a class="btn btn-mini" href="#" rel="nav-stacked">切换格式</a> </span>
                                    <div class="preview">导航</div>
                                    <div class="view">
                                        <ul class="nav nav-tabs" contenteditable="true">
                                            <li class="active"><a href="#">首页</a></li>
                                            <li><a href="#">资料</a></li>
                                            <li class="disabled"><a href="#">信息</a></li>
                                            <li class="dropdown pull-right"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉 <b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">操作</a></li>
                                                    <li><a href="#">设置栏目</a></li>
                                                    <li><a href="#">更多设置</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">分割线</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="well">嵌入</a> </span>
                                    <div class="preview">导航列表</div>
                                    <div class="view">
                                        <ul class="nav nav-list" contenteditable="true">
                                            <li class="nav-header">列表标题</li>
                                            <li class="active"><a href="#">首页</a></li>
                                            <li><a href="#">库</a></li>
                                            <li><a href="#">应用</a></li>
                                            <li class="nav-header">功能列表</li>
                                            <li><a href="#">资料</a></li>
                                            <li><a href="#">设置</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">帮助</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">面包屑导航</div>
                                    <div class="view">
                                        <ul class="breadcrumb" contenteditable="true">
                                            <li><a href="#">主页</a> <span class="divider">/</span></li>
                                            <li><a href="#">类目</a> <span class="divider">/</span></li>
                                            <li class="active">主题</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Size <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class=""><a href="#" rel="pagination-large">大</a></li>
                                                <li class="active"><a href="#" rel="">中</a></li>
                                                <li class=""><a href="#" rel="pagination-small">小</a></li>
                                                <li class=""><a href="#" rel="pagination-mini">微型</a></li>
                                            </ul>
                                        </span><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">位置 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">靠左</a></li>
                                                <li class=""><a href="#" rel="pagination-centered">居中</a></li>
                                                <li class=""><a href="#" rel="pagination-right">靠右</a></li>
                                            </ul>
                                        </span></span>
                                    <div class="preview">翻页</div>
                                    <div class="view">
                                        <div class="pagination">
                                            <ul contenteditable="true">
                                                <li><a href="#">上一页</a></li>
                                                <li><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">5</a></li>
                                                <li><a href="#">下一页</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">默认</a></li>
                                                <li class=""><a href="#" rel="badge-success">成功</a></li>
                                                <li class=""><a href="#" rel="badge-warning">警告</a></li>
                                                <li class=""><a href="#" rel="badge-important">重要</a></li>
                                                <li class=""><a href="#" rel="badge-info">提示</a></li>
                                                <li class=""><a href="#" rel="badge-inverse">倒数</a></li>
                                            </ul>
                                        </span></span>
                                    <div class="preview">文字标签</div>
                                    <div class="view"><span class="label" contenteditable="true">文字标签</span> </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">默认</a></li>
                                                <li class=""><a href="#" rel="badge-success">成功</a></li>
                                                <li class=""><a href="#" rel="badge-warning">警告</a></li>
                                                <li class=""><a href="#" rel="badge-important">重要</a></li>
                                                <li class=""><a href="#" rel="badge-info">提示</a></li>
                                                <li class=""><a href="#" rel="badge-inverse">倒数</a></li>
                                            </ul>
                                        </span></span>
                                    <div class="preview">微标</div>
                                    <div class="view"><span class="badge" contenteditable="true">1</span> </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="well">嵌入</a> </span>
                                    <div class="preview">概述</div>
                                    <div class="view">
                                        <div class="hero-unit" contenteditable="true">
                                            <h1>Hello, world!</h1>
                                            <p>这是一个可视化布局模板, 你可以点击模板里的文字进行修改, 也可以通过点击弹出的编辑框进行富文本修改. 拖动区块能实现排序. </p>
                                            <p><a class="btn btn-primary btn-large" href="#">参看更多 »</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                    </span>
                                    <div class="preview">超大屏幕</div>
                                    <div class="view">
                                        <div class="header">
                                            <ul class="nav nav-pills pull-right">
                                                <li class="active"><a href="#">主页</a></li>
                                                <li><a href="#">关于</a></li>
                                                <li><a href="#">联系我们</a></li>
                                            </ul>
                                            <h3 class="text-muted">项目名</h3>
                                        </div>
                                        <div class="jumbotron well">
                                            <h1>超大屏幕标题</h1>
                                            <p class="lead">这是一个可视化布局模板, 你可以点击模板里的文字进行修改, 也可以通过点击弹出的编辑框进行富文本修改. 拖动区块能实现排序.</p>
                                            <p><a class="btn btn-lg btn-success" href="#" role="button">登陆</a></p>
                                        </div>
                                        <div class="row marketing">
                                            <div class="col-lg-6">
                                                <h4>子标题</h4>
                                                <p>菜鸟教程，学的不仅是技术，更是梦想！</p>
                                                <h4>子标题</h4>
                                                <p>菜鸟教程，学的不仅是技术，更是梦想！</p>
                                                <h4>子标题</h4>
                                                <p>菜鸟教程，学的不仅是技术，更是梦想！</p>
                                            </div>
                                            <div class="col-lg-6">
                                                <h4>子标题</h4>
                                                <p>菜鸟教程，学的不仅是技术，更是梦想！</p>
                                                <h4>子标题</h4>
                                                <p>菜鸟教程，学的不仅是技术，更是梦想！</p>
                                                <h4>子标题</h4>
                                                <p>菜鸟教程，学的不仅是技术，更是梦想！</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">页面标题</div>
                                    <div class="view">
                                        <div class="page-header" contenteditable="true">
                                            <h1>页面标题实例<small>页面副标题</small></h1>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">文本</div>
                                    <div class="view">
                                        <h2 contenteditable="true">标题</h2>
                                        <p contenteditable="true">本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.</p>
                                        <p><a class="btn" href="#" contenteditable="true">查看更多 »</a></p>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">缩略图</div>
                                    <div class="view">
                                        <ul class="thumbnails">
                                            <li class="span4">
                                                <div class="thumbnail">
                                                    <img alt="300x200" src="img/people.jpg">
                                                    <div class="caption" contenteditable="true">
                                                        <h3>缩略图标题</h3>
                                                        <p>Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.</p>
                                                        <p><a class="btn btn-primary" href="#">动作</a> <a class="btn" href="#">动作</a></p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="span4">
                                                <div class="thumbnail">
                                                    <img alt="300x200" src="img/city.jpg">
                                                    <div class="caption" contenteditable="true">
                                                        <h3>缩略图标题</h3>
                                                        <p>Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.</p>
                                                        <p><a class="btn btn-primary" href="#">动作</a> <a class="btn" href="#">动作</a></p>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="span4">
                                                <div class="thumbnail">
                                                    <img alt="300x200" src="img/sports.jpg">
                                                    <div class="caption" contenteditable="true">
                                                        <h3>缩略图标题</h3>
                                                        <p>Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.</p>
                                                        <p><a class="btn btn-primary" href="#">动作</a> <a class="btn" href="#">动作</a></p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">Colors<span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li class="active"><a href="#" rel="">默认</a></li>
                                            <li class=""><a href="#" rel="progress-info">提示</a></li>
                                            <li class=""><a href="#" rel="progress-success">成功</a></li>
                                            <li class=""><a href="#" rel="progress-warning">警告</a></li>
                                            <li class=""><a href="#" rel="progress-danger">危险</a></li>
                                        </ul>
                                    </span><a class="btn btn-mini" href="#" rel="progress-striped">条纹</a> <a class="btn btn-mini" href="#" rel="active">动画</a> </span>
                                    <div class="preview">进度条</div>
                                    <div class="view">
                                        <div class="progress">
                                            <div class="bar" style="width: 60%;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="well">嵌入</a> </span>
                                    <div class="preview">嵌入媒体</div>
                                    <div class="view">
                                        <div class="media">
                                            <a href="#" class="pull-left">
                                                <img src="img/a_002.jpg" class="media-object">
                                            </a>
                                            <div class="media-body" contenteditable="true">
                                                <h4 class="media-heading">嵌入媒体标题</h4>
                                                请尽量使用HTML5兼容的视频格式和视频代码实现视频播放, 以达到更好的体验效果.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">列表组</div>
                                    <div class="view">
                                        <div class="list-group" contenteditable="true">
                                            <a href="#" class="list-group-item active">主页</a>
                                            <div class="list-group-item">列表标题</div>
                                            <div class="list-group-item">
                                                <h4 class="list-group-item-heading">列表项标题</h4>
                                                <p class="list-group-item-text">...</p>
                                            </div>
                                            <div class="list-group-item"><span class="badge">14</span>帮助</div>
                                            <a class="list-group-item active"><span class="badge">14</span>帮助</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="panel-default">默认</a></li>
                                                <li class=""><a href="#" rel="panel-primary">重要</a></li>
                                                <li class=""><a href="#" rel="progress-info">提示</a></li>
                                                <li class=""><a href="#" rel="progress-success">成功</a></li>
                                                <li class=""><a href="#" rel="progress-warning">警告</a></li>
                                                <li class=""><a href="#" rel="progress-danger">危险</a></li>
                                            </ul>
                                        </span></span>
                                    <div class="preview">面板</div>
                                    <div class="view">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h3 class="panel-title" contenteditable="true">面板标题</h3>
                                            </div>
                                            <div class="panel-body" contenteditable="true">
                                                Panel content
                                            </div>
                                            <div class="panel-footer" contenteditable="true">
                                                Panel footer
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">Glyphicon <span class="label label-important">NEW!</span></div>
                                    <div class="view">
                                        <ul class="glyphicons">
                                            <li>
                                                <span class="glyphicon glyphicon-adjust"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-adjust</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-align-center"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-align-center</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-align-justify"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-align-justify</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-align-left"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-align-left</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-align-right"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-align-right</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-arrow-down"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-arrow-down</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-arrow-left"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-arrow-left</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-arrow-right"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-arrow-right</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-arrow-up"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-arrow-up</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-asterisk"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-asterisk</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-backward"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-backward</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-ban-circle"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-ban-circle</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-barcode"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-barcode</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-bell"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-bell</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-bold"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-bold</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-book"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-book</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-bookmark"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-bookmark</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-briefcase"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-briefcase</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-bullhorn"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-bullhorn</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-calendar"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-calendar</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-camera"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-camera</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-certificate"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-certificate</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-check"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-check</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-chevron-down"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-chevron-down</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-chevron-left"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-chevron-left</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-chevron-right"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-chevron-right</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-chevron-up"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-chevron-up</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-circle-arrow-down"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-circle-arrow-down</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-circle-arrow-left"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-circle-arrow-left</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-circle-arrow-right"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-circle-arrow-right</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-circle-arrow-up"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-circle-arrow-up</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-cloud"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-cloud</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-cloud-download"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-cloud-download</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-cloud-upload"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-cloud-upload</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-cog"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-cog</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-collapse-down"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-collapse-down</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-collapse-up"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-collapse-up</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-comment"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-comment</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-compressed"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-compressed</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-copyright-mark"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-copyright-mark</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-credit-card"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-credit-card</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-cutlery"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-cutlery</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-dashboard"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-dashboard</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-download"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-download</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-download-alt"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-download-alt</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-earphone"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-earphone</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-edit"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-edit</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-eject"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-eject</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-envelope"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-envelope</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-euro"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-euro</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-exclamation-sign"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-exclamation-sign</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-expand"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-expand</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-export"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-export</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-eye-close"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-eye-close</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-eye-open"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-eye-open</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-facetime-video"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-facetime-video</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-fast-backward"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-fast-backward</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-fast-forward"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-fast-forward</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-file"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-file</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-film"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-film</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-filter"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-filter</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-fire"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-fire</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-flag"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-flag</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-flash"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-flash</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-floppy-disk"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-floppy-disk</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-floppy-open"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-floppy-open</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-floppy-remove"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-floppy-remove</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-floppy-save"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-floppy-save</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-floppy-saved"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-floppy-saved</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-folder-close"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-folder-close</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-folder-open"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-folder-open</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-font"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-font</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-forward"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-forward</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-fullscreen"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-fullscreen</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-gbp"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-gbp</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-gift"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-gift</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-glass"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-glass</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-globe"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-globe</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-hand-down"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-hand-down</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-hand-left"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-hand-left</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-hand-right"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-hand-right</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-hand-up"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-hand-up</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-hd-video"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-hd-video</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-hdd"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-hdd</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-header"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-header</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-headphones"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-headphones</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-heart"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-heart</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-heart-empty"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-heart-empty</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-home"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-home</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-import"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-import</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-inbox"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-inbox</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-indent-left"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-indent-left</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-indent-right"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-indent-right</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-info-sign"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-info-sign</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-italic"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-italic</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-leaf"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-leaf</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-link"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-link</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-list"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-list</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-list-alt"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-list-alt</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-lock"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-lock</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-log-in"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-log-in</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-log-out"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-log-out</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-magnet"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-magnet</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-map-marker"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-map-marker</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-minus"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-minus</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-minus-sign"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-minus-sign</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-move"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-move</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-music"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-music</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-new-window"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-new-window</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-off"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-off</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-ok"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-ok</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-ok-circle"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-ok-circle</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-ok-sign"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-ok-sign</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-open"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-open</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-paperclip"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-paperclip</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-pause"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-pause</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-pencil"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-pencil</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-phone"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-phone</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-phone-alt"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-phone-alt</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-picture"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-picture</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-plane"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-plane</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-play"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-play</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-play-circle"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-play-circle</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-plus"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-plus</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-plus-sign</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-print"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-print</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-pushpin"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-pushpin</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-qrcode"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-qrcode</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-question-sign"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-question-sign</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-random"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-random</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-record"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-record</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-refresh"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-refresh</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-registration-mark"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-registration-mark</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-remove"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-remove</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-remove-circle"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-remove-circle</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-remove-sign"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-remove-sign</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-repeat"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-repeat</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-resize-full"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-resize-full</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-resize-horizontal"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-resize-horizontal</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-resize-small"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-resize-small</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-resize-vertical"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-resize-vertical</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-retweet"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-retweet</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-road"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-road</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-save"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-save</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-saved"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-saved</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-screenshot"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-screenshot</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sd-video"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sd-video</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-search"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-search</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-send"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-send</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-share"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-share</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-share-alt"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-share-alt</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-shopping-cart"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-shopping-cart</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-signal"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-signal</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sort"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sort</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sort-by-alphabet"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-alphabet</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-alphabet-alt</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sort-by-attributes"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-attributes</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-attributes-alt</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sort-by-order"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-order</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sort-by-order-alt"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-order-alt</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sound-5-1"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sound-5-1</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sound-6-1"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sound-6-1</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sound-7-1"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sound-7-1</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sound-dolby"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sound-dolby</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-sound-stereo"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-sound-stereo</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-star"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-star</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-star-empty"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-star-empty</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-stats"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-stats</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-step-backward"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-step-backward</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-step-forward"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-step-forward</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-stop"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-stop</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-subtitles"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-subtitles</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-tag"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-tag</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-tags"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-tags</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-tasks"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-tasks</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-text-height"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-text-height</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-text-width"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-text-width</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-th"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-th</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-th-large"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-th-large</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-th-list"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-th-list</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-thumbs-down"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-thumbs-down</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-thumbs-up"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-thumbs-up</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-time"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-time</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-tint"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-tint</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-tower"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-tower</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-transfer"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-transfer</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-trash"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-trash</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-tree-conifer"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-tree-conifer</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-tree-deciduous"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-tree-deciduous</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-unchecked"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-unchecked</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-upload"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-upload</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-usd"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-usd</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-user"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-user</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-volume-down"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-volume-down</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-volume-off"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-volume-off</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-volume-up"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-volume-up</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-warning-sign"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-warning-sign</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-wrench"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-wrench</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-zoom-in"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-zoom-in</span>
                                            </li>
                                            <li>
                                                <span class="glyphicon glyphicon-zoom-out"></span>
                                                <span class="glyphicon-class">.glyphicon .glyphicon-zoom-out</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <ul class="nav nav-list accordion-group">
                            <li class="nav-header"><i class="icon-plus icon-white"></i>JAVASCRIPT
                                <div class="pull-right popover-info">
                                    <i class="icon-question-sign "></i>
                                    <div class="popover fade right">
                                        <div class="arrow"></div>
                                        <h3 class="popover-title">帮助</h3>
                                        <div class="popover-content">拖放组件到布局容器. 拖入后, 你可以配置显示样式. 如果有任何疑问可访问 <a target="_blank" href="#bootstrap/bootstrap-plugins-overview.html">JavaScript。</a></div>
                                    </div>
                                </div>
                            </li>
                            <li style="display: none;" class="boxes mute" id="elmJS">
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <div class="preview">遮罩窗体</div>
                                    <div class="view">
                                        <a id="myModalLink" href="#myModalContainer" role="button" class="btn" data-toggle="modal" contenteditable="true">触发遮罩窗体</a>
                                        <div id="myModalContainer" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                <h3 id="myModalLabel" contenteditable="true">标题栏</h3>
                                            </div>
                                            <div class="modal-body">
                                                <p contenteditable="true">显示信息</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn" data-dismiss="modal" aria-hidden="true" contenteditable="true">关闭</button>
                                                <button class="btn btn-primary" contenteditable="true">保存设置</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <a class="btn btn-mini" href="#" rel="navbar-inverse">Inverse</a>
                                    </span>
                                    <div class="preview">导航栏</div>
                                    <div class="view">
                                        <div class="navbar">
                                            <div class="navbar-inner">
                                                <div class="container-fluid">
                                                    <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a href="#" class="brand" contenteditable="true">网站名</a>
                                                    <div class="nav-collapse collapse navbar-responsive-collapse">
                                                        <ul class="nav" contenteditable="true">
                                                            <li class="active"><a href="#">主页</a></li>
                                                            <li><a href="#">链接</a></li>
                                                            <li><a href="#">链接</a></li>
                                                            <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单 <b class="caret"></b></a>
                                                                <ul class="dropdown-menu">
                                                                    <li><a href="#">下拉导航1</a></li>
                                                                    <li><a href="#">下拉导航2</a></li>
                                                                    <li><a href="#">其他</a></li>
                                                                    <li class="divider"></li>
                                                                    <li class="nav-header">标签</li>
                                                                    <li><a href="#">链接1</a></li>
                                                                    <li><a href="#">链接2</a></li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                        <ul class="nav pull-right" contenteditable="true">
                                                            <li><a href="#">右边链接</a></li>
                                                            <li class="divider-vertical"></li>
                                                            <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单 <b class="caret"></b></a>
                                                                <ul class="dropdown-menu">
                                                                    <li><a href="#">下拉导航1</a></li>
                                                                    <li><a href="#">下拉导航2</a></li>
                                                                    <li><a href="#">其他</a></li>
                                                                    <li class="divider"></li>
                                                                    <li><a href="#">链接3</a></li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                        <span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">位置 <span class="caret"></span></a>
                                            <ul class="dropdown-menu">
                                                <li class="active"><a href="#" rel="">默认</a></li>
                                                <li class=""><a href="#" rel="tabs-below">底部</a></li>
                                                <li class=""><a href="#" rel="tabs-left">靠左</a></li>
                                                <li class=""><a href="#" rel="tabs-right">靠右</a></li>
                                            </ul>
                                        </span></span>
                                    <div class="preview">切换卡</div>
                                    <div class="view">
                                        <div class="tabbable" id="myTabs">
                                            <ul class="nav nav-tabs">
                                                <li class="active"><a href="#tab1" data-toggle="tab" contenteditable="true">第一部分</a></li>
                                                <li><a href="#tab2" data-toggle="tab" contenteditable="true">第二部分</a></li>
                                            </ul>
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="tab1" contenteditable="true">
                                                    <p>第一部分内容.</p>
                                                </div>
                                                <div class="tab-pane" id="tab2" contenteditable="true">
                                                    <p>第二部分内容.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration"><span class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式 <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li class="active"><a href="#" rel="">默认</a></li>
                                            <li class=""><a href="#" rel="alert-info">提示</a></li>
                                            <li class=""><a href="#" rel="alert-error">错误</a></li>
                                            <li class=""><a href="#" rel="alert-success">成功</a></li>
                                        </ul>
                                    </span></span>
                                    <div class="preview">提示框</div>
                                    <div class="view">
                                        <div class="alert" contenteditable="true">
                                            <button type="button" class="close" data-dismiss="alert">×</button>
                                            <h4>提示!</h4>
                                            <strong>警告!</strong> 请注意你的个人隐私安全.
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">手风琴切换</div>
                                    <div class="view">
                                        <div class="accordion" id="myAccordion">
                                            <div class="accordion-group">
                                                <div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne" contenteditable="true">选项卡 #1 </a></div>
                                                <div id="collapseOne" class="accordion-body collapse in">
                                                    <div class="accordion-inner" contenteditable="true">功能块... </div>
                                                </div>
                                            </div>
                                            <div class="accordion-group">
                                                <div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo" contenteditable="true">选项卡 #2 </a></div>
                                                <div id="collapseTwo" class="accordion-body collapse">
                                                    <div class="accordion-inner" contenteditable="true">功能块... </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="box box-element ui-draggable">
                                    <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
                                    <span class="configuration">
                                        <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button></span>
                                    <div class="preview">轮换图</div>
                                    <div class="view">
                                        <div class="carousel slide" id="myCarousel">
                                            <ol class="carousel-indicators">
                                                <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                                                <li data-slide-to="1" data-target="#myCarousel" class=""></li>
                                                <li data-slide-to="2" data-target="#myCarousel" class=""></li>
                                            </ol>
                                            <div class="carousel-inner">
                                                <div class="item active">
                                                    <img alt="" src="img/1.jpg">
                                                    <div class="carousel-caption" contenteditable="true">
                                                        <h4>棒球</h4>
                                                        <p>棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。</p>
                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <img alt="" src="img/2.jpg">
                                                    <div class="carousel-caption" contenteditable="true">
                                                        <h4>冲浪</h4>
                                                        <p>冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。</p>
                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <img alt="" src="img/3.jpg">
                                                    <div class="carousel-caption" contenteditable="true">
                                                        <h4>自行车</h4>
                                                        <p>以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="demo ui-sortable" style="min-height: 304px;">
                    <div class="lyrow">
                        <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                        <span class="drag label"><i class="icon-move"></i>拖动</span>
                        <div class="preview">9 3</div>
                        <div class="view">
                            <div class="row-fluid clearfix">
                                <div class="span12 column ui-sortable">
                                    <div class="box box-element ui-draggable" style="display: block;">
                                        <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span> <span class="configuration">
                                            <button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button>
                                            <a class="btn btn-mini" href="#" rel="well">Well</a> </span>
                                        <div class="preview">Jumbotron</div>
                                        <div class="view">
                                            <div class="hero-unit" contenteditable="true">
                                                <h1>SiteMate CMS</h1>
                                                <p><hr /></p>
                                                <h2><strong>简单、自由、强大、免费！</strong></h2>
                                                <p>以CMS为起步，但超越CMS的概念设计，传承ASP.NET的优秀设计理念，延展ASP.NET的应用框架。</p>
                                                <p><a class="btn btn-primary btn-large" href="http://demo.sitemate.net/demo/">SiteMate 在线教程 »</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="download-layout">
                    <div class="container-fluid"></div>
                </div>
            </div>
        </div>
        <div class="modal hide fade" role="dialog" id="editorModal">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>Save your Layout</h3>
            </div>
            <div class="modal-body">
                <p>
                    <textarea id="contenteditor"></textarea>
                </p>
            </div>
            <div class="modal-footer"><a id="savecontent" class="btn btn-primary" data-dismiss="modal">Save</a> <a class="btn" data-dismiss="modal">Cancel</a> </div>
        </div>
        <div class="modal hide fade" role="dialog" id="downloadModal">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>下载</h3>
            </div>
            <div class="modal-body">
                <p>选择你要保存的布局</p>
                <div class="btn-group">
                    <button type="button" id="fluidPage" class="active btn btn-info"><i class="icon-fullscreen icon-white"></i>自适应宽度</button>
                    <button type="button" class="btn btn-info" id="fixedPage"><i class="icon-screenshot icon-white"></i>固定宽度</button>
                </div>
                <br>
                <br>
                <p>
                    <textarea></textarea>
                </p>
            </div>
            <div class="modal-footer"><a class="btn" data-dismiss="modal" onclick="javascript:saveHtml();">保存</a> </div>
        </div>
    </div>
    <script>
        function resizeCanvas(size) {
            var containerID = document.getElementsByClassName("changeDimension");
            var containerDownload = document.getElementById("download-layout").getElementsByClassName("container-fluid")[0];
            var row = document.getElementsByClassName("demo ui-sortable");
            var container1 = document.getElementsByClassName("container1");
            if (size == "md") {
                $(containerID).width('id', "MD");
                $(row).attr('id', "MD");
                $(container1).attr('id', "MD");
                $(containerDownload).attr('id', "MD");
            }
            if (size == "lg") {
                $(containerID).attr('id', "LG");
                $(row).attr('id', "LG");
                $(container1).attr('id', "LG");
                $(containerDownload).attr('id', "LG");
            }
            if (size == "sm") {
                $(containerID).attr('id', "SM");
                $(row).attr('id', "SM");
                $(container1).attr('id', "SM");
                $(containerDownload).attr('id', "SM");
            }
            if (size == "xs") {
                $(containerID).attr('id', "XS");
                $(row).attr('id', "XS");
                $(container1).attr('id', "XS");
                $(containerDownload).attr('id', "XS");
            }
        }
    </script>
</body>
</html>
